<template>
    <el-dialog :visible.sync="dialogVisible" title="岗位详情" width="800px" top="10px" :before-close="handleClose"
        class="position-detail-dialog">
        <div class="position-content">
            <!-- 岗位基本信息卡片 -->
            <div class="card-base-info">
                <div class="card-header">
                    <div class="position-title">
                        <h3>{{ positionMessage.positionName || '未命名岗位' }}</h3>
                        <span class="position-status" v-if="positionMessage.status">{{
                            getStatusText(positionMessage.status) }}</span>
                    </div>
                    <div class="position-salary">
                        <span
                            v-if="positionMessage.lowestSalaryMonth !== undefined && positionMessage.highestSalaryMonth !== undefined">
                            {{ positionMessage.lowestSalaryMonth }}-{{ positionMessage.highestSalaryMonth }} 元/月
                        </span>
                        <span v-else>{{ positionMessage.salary || '-' }}</span>
                    </div>
                </div>

                <div class="card-body">
                    <div class="info-grid">
                        <div class="info-item">
                            <i class="el-icon-briefcase"></i>
                            <span class="label">岗位类别</span>
                            <span class="value">{{ positionMessage.positionType || '-' }}</span>
                        </div>
                        <div class="info-item">
                            <i class="el-icon-position"></i>
                            <span class="label">工作地点</span>
                            <span class="value">{{ positionMessage.positionLocation || positionMessage.location || '-'
                            }}</span>
                        </div>
                        <div class="info-item">
                            <i class="el-icon-date"></i>
                            <span class="label">发布时间</span>
                            <span class="value">{{ formatDate(positionMessage.createDate) || '-' }}</span>
                        </div>
                        <div class="info-item">
                            <i class="el-icon-education"></i>
                            <span class="label">学历要求</span>
                            <span class="value">{{ getEducationText(positionMessage.education) || '-' }}</span>
                        </div>
                        <div class="info-item">
                            <i class="el-icon-time"></i>
                            <span class="label">工作类型</span>
                            <span class="value">{{ positionMessage.workTimeType === 'DOUBLE_REST' ? '双休' : '单休' || '-'
                            }}</span>
                        </div>
                        <div class="info-item">
                            <i class="el-icon-time"></i>
                            <span class="label">工作时间</span>
                            <span class="value">{{ formatTime(positionMessage.workDayStartTime) }}-{{
                                formatTime(positionMessage.workDayEndTime) || '-' }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 双栏布局容器 -->
            <div class="two-column-layout">
                <!-- 左侧栏：岗位职责和要求 -->
                <div class="left-column">
                    <!-- 岗位职责卡片 -->
                    <div class="card">
                        <div class="card-title">
                            <i class="el-icon-document"></i>
                            <span>岗位职责</span>
                        </div>
                        <div class="card-content">
                            <div class="content-text">{{ positionMessage.positionDetail || '暂无岗位职责描述' }}</div>
                        </div>
                    </div>

                    <!-- 岗位要求卡片 -->
                    <div class="card">
                        <div class="card-title">
                            <i class="el-icon-tickets"></i>
                            <span>岗位要求</span>
                        </div>
                        <div class="card-content">
                            <div class="content-text">{{ positionMessage.positionRequire || '暂无岗位要求描述' }}</div>
                        </div>
                    </div>
                </div>

                <!-- 右侧栏：公司信息和发布人信息 -->
                <div class="right-column">
                    <!-- 公司信息卡片 -->
                    <div class="card company-card" @click="goToCompanyDetail()">
                        <div class="card-title">
                            <i class="el-icon-office-building"></i>
                            <span>公司信息</span>
                        </div>
                        <div class="card-content">
                            <div class="company-info">
                                <div class="company-avatar">
                                    <img :src="positionMessage.companyAvatar || defaultAvatar" alt="公司头像">
                                </div>
                                <div class="company-details">
                                    <div class="company-name">{{ positionMessage.companyName || '-' }}</div>
                                    <div class="company-info-row">
                                        <span class="company-industry">
                                            <i class="el-icon-s-cooperation"></i>
                                            {{ positionMessage.companyIndustry || '-' }}
                                        </span>
                                        <span class="company-location">
                                            <i class="el-icon-location"></i>
                                            {{ positionMessage.companyLocation || '-' }}
                                        </span>
                                    </div>
                                    <div class="company-introduction">
                                        {{ positionMessage.companyIntroduction || '暂无公司介绍' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 发布人信息卡片 -->
                    <div class="card publisher-card">
                        <div class="card-title">
                            <i class="el-icon-user"></i>
                            <span>发布人信息</span>
                        </div>
                        <div class="card-content">
                            <div class="publisher-info">
                                <div class="publisher-avatar">
                                    <img :src="positionMessage.avatar || positionMessage.mcrossComUserMessageResp?.avatar || defaultAvatar"
                                        alt="发布人头像">
                                </div>
                                <div class="publisher-details">
                                    <div class="publisher-name">{{ positionMessage.name ||
                                        positionMessage.mcrossComUserMessageResp?.name || '-' }}</div>
                                    <div class="publisher-info-row">

                                        <span class="publisher-education">
                                            <i class="el-icon-education"></i>
                                            {{ getEducationText(positionMessage.education) || '-' }}
                                        </span>
                                    </div>
                                    <div class="publisher-contact">
                                        <i class="el-icon-phone"></i>
                                        {{ positionMessage.phone || positionMessage.mcrossComUserMessageResp?.phone ||
                                            '-' }}
                                    </div>
                                    <div class="publisher-role">
                                        <i class="el-icon-suitcase"></i>
                                        {{ getPublisherTypeText(positionMessage.type) || '-' }}
                                    </div>
                                </div>
                            </div>

                            <!-- 个人信息 -->
                            <div class="personal-info-section">
                                <div class="section-title">
                                    <i class="el-icon-document"></i>
                                    <span>个人信息</span>
                                </div>
                                <div class="personal-item">
                                    <span class="label">出生日期:</span>
                                    <span class="value">{{ formatDate(positionMessage.birthDate) || '-' }}</span>
                                </div>
                                <div class="personal-item">
                                    <span class="label">性别:</span>
                                    <span class="value">{{ positionMessage.gender || '-' }}</span>
                                </div>
                                <div class="personal-item">
                                    <span class="label">年龄:</span>
                                    <span class="value">{{ positionMessage.age || '-' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose()" size="medium" class="btn-close">
                    <i class="el-icon-close"></i> 关闭
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import { getPositionMessage } from '@/util/manager_api/position';
export default {
    name: "PositionDetailDialog",
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        position: {
            type: Object,
            default: () => ({})
        },
        defaultAvatar: {
            type: String,
            default: 'https://picsum.photos/200/200?random=1'
        }
    },
    data() {
        return {
            positionMessage: [],
            dialogVisible: this.visible // 初始化本地状态
        };
    },

    watch: {
        position(newPosition) {
            console.log('PositionDialog接收到的position更新:', newPosition);
            this.fetchPositionMessage();
        },
        visible(newValue) {
            this.dialogVisible = newValue;
        },
    },
    methods: {
        async fetchPositionMessage() {
            try {
                const response = await getPositionMessage({ positionId: this.position.positionId });
                this.positionMessage = response.data.data;
            } catch (error) {
                console.error('错误详情:', error.response);
            }
        },
        goToCompanyDetail() {
            localStorage.setItem('companyId', this.positionMessage.companyId);
            this.$router.push({ name: 'company-detail' });
        },
        // 格式化日期（保留完整日期）
        formatDate(dateString) {
            if (!dateString) return '未提供';

            try {
                const date = new Date(dateString);
                if (isNaN(date.getTime())) {
                    return '日期格式错误';
                }
                return date.toLocaleDateString('zh-CN', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                });
            } catch (error) {
                console.error('日期解析失败:', error);
                return '日期解析失败';
            }
        },

        // 格式化时间（只保留时间部分）
        formatTime(dateString) {
            if (!dateString) return '未提供';

            try {
                const date = new Date(dateString);
                if (isNaN(date.getTime())) {
                    return '日期格式错误';
                }
                return date.toLocaleTimeString('zh-CN', {
                    hour: '2-digit',
                    minute: '2-digit'
                });
            } catch (error) {
                console.error('时间解析失败:', error);
                return '时间解析失败';
            }
        },

        // 获取教育程度文本
        getEducationText(education) {
            const educationMap = {
                'UNDERGRADUATE': '本科',
                'POSTGRADUATE': '硕士',
                'DOCTOR': '博士',
                'JUNIOR_COLLEGE': '大专',
                'HIGH_SCHOOL': '高中',
                'MIDDLE_SCHOOL': '初中',
                'ELEMENTARY_SCHOOL': '小学',
                'OTHER': '其他'
            };
            return educationMap[education] || education;
        },

        // 获取发布人类型文本
        getPublisherTypeText(type) {
            const typeMap = {
                'BOSS': '老板',
                'MANAGEMENT': '管理层',
                'RECRUITER': '招聘人员'
            };
            return typeMap[type] || type;
        },

        // 获取职位状态文本
        getStatusText(status) {
            const statusMap = {
                'OPEN': '开放',
                'CLOSED': '已关闭',
                'FILLED': '已填充',
                'PENDING': '待定'
            };
            return statusMap[status] || status;
        },
        handleClose() {
            this.dialogVisible = false;
            this.$emit('update:visible', false);
        }
    }
};
</script>

<style scoped>
/* 对话框整体样式 */
.position-detail-dialog .el-dialog {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.position-detail-dialog .el-dialog:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.position-detail-dialog .el-dialog__header {
    background: linear-gradient(90deg, #409EFF, #66B1FF);
    color: white;
    padding: 18px 24px;
    border-bottom: none;
    position: relative;
}

.position-detail-dialog .el-dialog__title {
    font-size: 20px;
    font-weight: 500;
}

.position-detail-dialog .el-dialog__headerbtn {
    top: 18px;
}

.position-detail-dialog .el-dialog__headerbtn .el-dialog__close {
    color: white;
    transition: color 0.2s ease;
}

.position-detail-dialog .el-dialog__headerbtn:hover .el-dialog__close {
    color: #e6e6e6;
}

/* 内容区域样式 */
.position-content {
    padding: 24px;
    max-height: calc(90vh - 120px);
    overflow-y: auto;
    background-color: #f8fafc;
}

/* 卡片通用样式 */
.card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.card-title {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f5f7fa;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    background-color: #fafafa;
}

.card-title i {
    margin-right: 10px;
    color: #409EFF;
}

.card-content {
    padding: 20px;
}

/* 基本信息卡片 */
.card-base-info {
    background: linear-gradient(135deg, #f0f9ff 0%, #e6f4ff 100%);
    border-radius: 10px;
    margin-bottom: 24px;
    overflow: hidden;
    position: relative;
}

.card-base-info .card-header {
    padding: 20px 20px 15px;
}

.card-base-info .position-title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.card-base-info .position-title h3 {
    font-size: 22px;
    font-weight: 600;
    color: #303133;
    margin-right: 12px;
}

.card-base-info .position-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.card-base-info .position-status[data-status="OPEN"] {
    background-color: #e6f7ff;
    color: #1890ff;
}

.card-base-info .position-status[data-status="CLOSED"] {
    background-color: #f5f5f5;
    color: #bfbfbf;
}

.card-base-info .position-status[data-status="FILLED"] {
    background-color: #f6ffed;
    color: #52c41a;
}

.card-base-info .position-status[data-status="PENDING"] {
    background-color: #fff7e6;
    color: #fa8c16;
}

.card-base-info .position-salary {
    font-size: 18px;
    font-weight: 600;
    color: #f56c6c;
}

.card-base-info .card-body {
    padding: 10px 20px 20px;
}

/* 信息网格样式 */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.info-item {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.info-item:hover {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.info-item i {
    font-size: 18px;
    color: #409EFF;
    margin-right: 12px;
    width: 20px;
    text-align: center;
}

.info-item .label {
    font-size: 13px;
    color: #909399;
    display: block;
    margin-bottom: 2px;
}

.info-item .value {
    font-size: 14px;
    color: #303133;
    font-weight: 500;
}

/* 双栏布局 */
.two-column-layout {
    display: flex;
    gap: 20px;
}

.left-column {
    flex: 3;
}

.right-column {
    flex: 2;
}

/* 公司信息样式 */
.company-card .company-info {
    display: flex;
    align-items: flex-start;
}

.company-card .company-avatar {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.company-card .company-avatar:hover {
    transform: scale(1.05);
}

.company-card .company-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.company-card .company-name {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 8px;
}

.company-card .company-info-row {
    display: flex;
    color: #606266;
    font-size: 14px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.company-card .company-industry,
.company-card .company-location {
    display: flex;
    align-items: center;
    margin-right: 16px;
    margin-bottom: 4px;
}

.company-card .company-industry i,
.company-card .company-location i {
    margin-right: 4px;
    color: #909399;
}

.company-card .company-introduction {
    color: #909399;
    font-size: 14px;
    line-height: 1.6;
}

/* 发布人信息样式 */
.publisher-card .publisher-info {
    display: flex;
    align-items: flex-start;
}

.publisher-card .publisher-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.publisher-card .publisher-avatar:hover {
    transform: scale(1.05);
}

.publisher-card .publisher-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.publisher-card .publisher-name {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 8px;
}

.publisher-card .publisher-info-row {
    display: flex;
    color: #606266;
    font-size: 14px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.publisher-card .publisher-gender,
.publisher-card .publisher-age,
.publisher-card .publisher-education {
    display: flex;
    align-items: center;
    margin-right: 16px;
    margin-bottom: 4px;
}

.publisher-card .publisher-gender i,
.publisher-card .publisher-age i,
.publisher-card .publisher-education i {
    margin-right: 4px;
    color: #909399;
}

.publisher-card .publisher-contact,
.publisher-card .publisher-role {
    display: flex;
    align-items: center;
    color: #909399;
    font-size: 14px;
    margin-bottom: 4px;
}

.publisher-card .publisher-contact i,
.publisher-card .publisher-role i {
    margin-right: 4px;
    color: #909399;
}

/* 个人信息样式 */
.personal-info-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f5f7fa;
}

.personal-info-section .section-title {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 12px;
}

.personal-info-section .section-title i {
    margin-right: 8px;
    color: #409EFF;
}

.personal-info-section .personal-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
}

.personal-info-section .personal-item .label {
    width: 90px;
    color: #909399;
}

/* 内容文本样式 */
.content-text {
    color: #606266;
    line-height: 1.8;
    margin: 0;
    white-space: pre-wrap;
}

/* 底部按钮样式 */
.dialog-footer {
    padding: 16px 24px;
    border-top: 1px solid #f5f7fa;
    background-color: white;
    display: flex;
    justify-content: center;
}

.btn-close {
    background-color: #f5f7fa;
    color: #606266;
    border: none;
    padding: 8px 20px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close:hover {
    background-color: #ebeef5;
    color: #303133;
    transform: translateY(-1px);
}

.btn-close i {
    margin-right: 6px;
}

/* 响应式布局 */
@media (max-width: 768px) {
    .two-column-layout {
        flex-direction: column;
    }

    .left-column,
    .right-column {
        flex: 1;
    }

    .info-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}
</style>